import * as React from 'react';
import {View, TextInput, Text} from 'react-native';
import PropTypes from 'prop-types';

const nodeType = PropTypes.oneOfType([
    PropTypes.element,
    PropTypes.object,
    PropTypes.bool,
    PropTypes.func,
    PropTypes.node
]);

class TextField extends React.Component {
    render() {
        const {Component, leftComponent, rightComponent, label} = this.props;
        return (
            <View style={{
                flexDirection: 'row',
                borderBottomWidth: 0.5,
                borderBottomColor: '#e5e5e5',
                ...this.props.containerStyle
            }}>
                {leftComponent && leftComponent}
                {label && this.renderLabel()}
                {Component && this.renderInput()}
                {rightComponent && rightComponent}
            </View>
        );
    }

    renderLabel = () => {
        const {labelContainerStyle, label, labelStyle, labelWidth} = this.props;
        return (
            <View style={{
                alignItems: 'flex-start',
                justifyContent: 'center',
                marginRight: 10,
                width: labelWidth,
                ...labelContainerStyle
            }}>
                <Text style={{
                    fontSize: 16,
                    color: '#333',
                    ...labelStyle
                }}>{label}</Text>
            </View>
        )
    }

    renderInput = () => {
        const {Component, inputContainerStyle, inputStyle} = this.props;
        return (
            <View style={{
                flex: 1,
                alignItems: 'center',
                justifyContent: 'center',
                paddingVertical: 10,
                ...inputContainerStyle
            }}>
                <Component
                    underlineColorAndroid={"transparent"}
                    placeholderTextColor={"#999"}
                    returnKeyType={"done"}
                    returnKeyLabel={"完成"}
                    {...this.props}
                    style={{
                        color: '#333',
                        borderWidth: 0,
                        textAlignVertical: 'center',
                        fontSize: 16,
                        includeFontPadding: false,
                        paddingVertical: 0,
                        paddingHorizontal: 0,
                        margin: 0,
                        width: '100%',
                        minHeight: 40,
                        ...inputStyle
                    }}
                />
            </View>
        )
    }
}

TextField.propTypes = {
    containerStyle: PropTypes.object,
    label: PropTypes.string,
    labelStyle: PropTypes.object,
    labelWidth: PropTypes.number,
    labelContainerStyle: PropTypes.object,
    inputStyle: PropTypes.object,
    inputContainerStyle: PropTypes.object,
    Component: nodeType,
    leftComponent: nodeType,
    rightComponent: nodeType
}

TextField.defaultProps = {
    label: null,
    labelWidth: 80,
    Component: TextInput,
    leftComponent: false,
    rightComponent: false
}

export default TextField;
